<template>
  <div class="play-controller">
    <div class="left" @click="show = !show">
      <img :src="songDetail.picUrl ? songDetail.picUrl : logo" alt="" ref="rotating">
      <div class="content">
        <div class="title">{{songDetail.name}}</div>
        <div class="tips">横滑可以切换上下首歌</div>
      </div>
    </div>
    <div class="right">
      <img src="../assets/play.png" alt="" class="pause" @click="play" v-if="pause">
      <img src="../assets/pause.png" alt="" class="pause" @click="play" v-else>
      <img src="../assets/list.png" alt="">
    </div>
    <!-- Todo: 解决传值问题 -->
    <play-music :curSongId="curSongId" :currentPlayTime="currentPlayTime" :pause="pause" :play="play" v-show="show" @back="show = !show"></play-music>
    <!-- 这里后期需要配置 -->
    <audio ref="audio" :src="'https://music.163.com/song/media/outer/url?id=33894312.mp3'"></audio>
  </div>
</template>

<script>
import logo from '../assets/logo.png'
import PlayMusic from './PlayMusic.vue'
import { computed, ref, watch, getCurrentInstance, reactive } from 'vue'
import { useStore } from 'vuex'
export default {
  setup() {
    // ref钩子
    const audio = ref()
    const rotating = ref()
    const pause = ref(true)
    const store = useStore()
    const songDetail = reactive({})
    const show = ref(false)
    const currentPlayTime = ref(0)
    const { proxy } = getCurrentInstance()
    let player
    // 播放暂停事件
    const play = () => {
      // Todo: currentTime用于判断歌词时间，解决传值
      if (pause.value) {
        audio.value.play()
        rotating.value.classList.add('animate')
        pause.value = false
        // 添加timer，记录歌曲播放时间
        start()
      } else {
        audio.value.pause()
        rotating.value.classList.remove('animate')
        pause.value = true
        // 移除时间
        end()
      }
    }

    // 计时器开始及结束
    const start = () => {
      player = setInterval(() => {
        currentPlayTime.value = audio.value.currentTime
      }, 100)
    }
    const end = () => {
      player = clearInterval(player)
    }

    // 监听歌曲id变化
    const curSongId = computed(() => {
      return store.state.curSongId
    })
    watch(curSongId, newVal => {
      audio.value.pause()
      pause.value = true
      audio.value.src = `https://music.163.com/song/media/outer/url?id=${newVal}.mp3`
      proxy.$http.get(`/song/detail?ids=${newVal}`).then(res => {
        if (res.code === 200) {
          songDetail.picUrl = res.songs[0].al.picUrl
          songDetail.name = res.songs[0].name
        }
      })
      play()
    })

    return {
      audio,
      play,
      pause,
      songDetail,
      logo,
      rotating,
      curSongId,
      show,
      currentPlayTime
    }
  },
  components: {
    PlayMusic
  }
}
</script>

<style lang="less" scoped>
@keyframes rotating {
  100% {
    transform: rotate(360deg);
  }
}
.animate {
  animation: rotating 10s infinite linear;
}
.play-controller {
  width: 7.5rem;
  height: 1.2rem;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.4rem;
  color: #333;
  border-top: 1px solid #ccc;
  background-color: #fff;
  .left {
    display: flex;
    align-items: center;
    margin-left: 0.1rem;
    .content {
      margin-left: 0.1rem;
      .title {
        overflow: hidden;
        height: 0.6rem;
      }
      .tips {
        font-size: 0.3rem;
        color: #ccc;
      }
    }
    img {
      width: 0.8rem;
      height: 0.8rem;
      // background-color: pink;
      border-radius: 50%;
    }
  }
  .right {
    display: flex;
    align-items: center;
    img {
      width: 0.7rem;
      height: 0.7rem;
      margin-right: 0.2rem;
    }
    .pause {
      border: 1px solid orangered;
      border-radius: 0.35rem;
    }
  }
}
</style>